<template>
  <div class="container-box">
    <!--筛选表单-->
    <div class="tag-form">
      <el-form ref="form" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="query.wordName" placeholder="请输入词汇名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.description" placeholder="请输入词汇描述" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="query.name" placeholder="请输入创建者名" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="seacrWord">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div>
          <el-button icon="el-icon-plus" type="primary" size="small" plain @click="isShow=true,type='add'">创建</el-button>
        </div>
      </el-row>
    </div>
    <!--操作区域-->

    <!--表单区域-->
    <div class="table-box">
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="id" label="词汇ID" width="70" />
        <el-table-column prop="wordName" label="词汇名称" />
        <el-table-column prop="description" label="词汇描述" />
        <el-table-column prop="subject" label="词汇热度">
          <template #default="{row}">
            <span class="span_button">{{ row.wordHot }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="创建者">
          <template #default="{row}">
            <span class="span_button">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />

        <el-table-column label="操作">
          <template #default="{row}">
            <!-- 编辑 -->
            <el-button size="small" type="primary" icon="el-icon-edit" circle class="editbtn" @click="editWord(row.id)" />
            <!-- 删除 -->
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteWord(row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页区域-->
    <div class="page" style="margin-top: 10px">
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page.sync="query.page"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="query.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="currentChange"
          @size-change="limitChange"
        />
      </el-row>

    </div>
    <!-- 弹出层 -->
    <el-dialog title="添加词汇" :visible.sync="isShow" width="60%" @close="resetClose">
      <el-form ref="form" label-width="120px" size="normal" :model="formData" :rules="rules">
        <el-row type="flex">
          <el-form-item label="词汇名称" prop="wordName">
            <el-input v-model="formData.wordName" style="width:240px" />
          </el-form-item>
          <el-form-item label="创建者" prop="name">
            <el-input v-model="formData.name" style="width:240px" />
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-form-item label="词汇热度" prop="wordHot">
            <el-input v-model="formData.wordHot" style="width:240px" />
          </el-form-item>
          <el-form-item label="词汇描述" prop="description">
            <el-input v-model="formData.description" type="textarea" style="width:240px" />
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button @click="isShow=false">取消</el-button>
          <el-button v-if="type === 'edit'" type="primary" @click="uploadWord">修改</el-button>
          <el-button v-else type="primary" @click="addWord">新增</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'
// import { getAllSubjectApi } from '@/api/subject'
import { getWordApi, addWordApi, deleteWordApi, editWordApi, uploadWordApi } from '@/api/word'
export default {
  data() {
    return {
      type: '',
      isShow: false,
      total: 0,
      // 表格数据
      list: [],
      // 查询参数(请求时携带的参数)
      query: {
        page: 1,
        limit: 10,
        wordName: '',
        subject: { subjectId: '' },
        description: '',
        isCollect: '',
        wordHot: ''
      },
      formData: { // 弹出层数据
        wordName: '',
        description: '',
        subject: { subjectId: '', subjectName: '' },
        wordHot: '',
        name: '',
        createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
      },
      rules: { // 校验规则
        wordName: [
          { required: true, message: '词汇名称不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请填写描述', trigger: 'blur' }
        ],
        wordHot: [
          { required: true, message: '请输入词汇热度', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入创建者名', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getWordList()
  },
  methods: {
    // 获取列表渲染
    async getWordList() {
      const res = await getWordApi(this.query)
      console.log(res)
      this.list = res.data.data.list
      this.total = res.data.data.total
    },
    // 新增功能
    async addWord() {
      await this.$refs.form.validate()
      await addWordApi(this.formData)
      this.$message.success('新增成功')
      this.getWordList()
      this.isShow = false
    },
    // 删除功能
    deleteWord(id) {
      this.$confirm('确定删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deleteWordApi(id)
        console.log(res)
        this.getWordList()
        this.$message({ type: 'success', message: '删除成功!' })
        if (this.query.page > 1 && this.list.length === 1) {
          this.query.page--
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 数据回显
    async editWord(id) {
      this.type = 'edit'
      // console.log(id)
      const res = await editWordApi({ id })
      console.log(res)
      res.data.data.subjectId = res.data.data.subject.subjectId
      // res.data.data.subjectName = res.data.data.subject.subjectName
      this.formData = res.data.data
      this.isShow = true
    },
    // 修改功能
    async uploadWord() {
      await this.$refs.form.validate()
      const res = await uploadWordApi(this.formData)
      console.log(res)
      this.$message.success('修改成功')
      this.getWordList()
      this.isShow = false
    },
    // 搜索功能
    async seacrWord() {
      this.query.page = 1
      this.getWordList()
    },

    // 重置弹出框
    resetClose() {
      this.formData = {
        wordName: '',
        description: '',
        subject: { subjectId: '', subjectName: '' },
        wordHot: '',
        name: '',
        createTime: moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
      }
      this.$refs.form.clearValidate()
    },
    // 重置功能
    resetSearch() {
      this.query = {
        page: 1,
        limit: 10,
        wordName: '',
        description: '',
        subject: { subjectId: '' },
        isCollect: ''
      }
      this.getWordList()
    },
    // 分页器
    // 页码变动
    currentChange(value) {
      this.query.page = value
      this.getWordList()
    },
    // 每页数量变动
    limitChange(value) {
      this.query.limit = value
      this.getWordList()
    }
  }
}
</script>

<style lang="scss" scoped>
.container-box{
  padding: 30px;
}
.filter-form,
.tool-bar{
  /* border: 1px solid #ddd; */
  padding: 5px 15px 10px;
  margin-bottom: 10px;
}
.tag-form{
  display: flex;
  justify-content: space-between;
}
::v-deep .el-table td, .el-table th.is-leaf{
  text-align: center;
}
.span_button{
  color: #58acfa;
  background-color: #e8f5f7;
  cursor: pointer;
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #b5d8f8;
  border-radius: 3px;
}
::v-deep .el-table_1_column_1 .cell{
  padding: 0 !important;
  letter-spacing: 2px;
}
::v-deep .is-leaf {
  text-align: center;
}
::v-deep .el-dialog{
  height: 300px;
}
.editbtn{
  margin-right: 10px;
}
</style>
